<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冰果网站banner</title>
<style type="text/css">
#flashBg {height:362px;overflow:hidden;width:100%;clear:both;margin: 0;padding: 0;}
#flashLine {height: 347px;width: 100%;clear:both;}
#flash{width: 1000px;height: 362px;overflow:hidden;margin:0 auto;clear: both;position: relative;padding: 0px 0px;}
#flash a {width: 1000px;height: 362px;display: none;}
#flash img {width: 1000px;height: 362px;}
.flash_bar {width:575px;padding-left: 425px;z-index: 2;height: 30px;overflow: hidden;position: absolute;padding-top: 13px!important;padding-top: 12px;
bottom:0px;left:0px; background: url(pic/tg_flashbar.png) no-repeat 0px 0px;text-align: center;}
.flash_bar .dq {
display: block;float: left;width: 12px;height: 12px;margin:2px 4px;cursor: pointer;background:url(pic/pagination.png) no-repeat 0px -12px; overflow:hidden;}

.flash_bar .no {display: block;float: left;width: 12px;height: 12px;margin:2px 4px;cursor: pointer;
background:url(pic/pagination.png) no-repeat 0px 0px; overflow:hidden}</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script> 



<script type="text/javascript">

var currentindex=1;

var timerID;

function timer_tick() {

currentindex=currentindex>=$("#control_point").children().length?1:currentindex+1;//此处的5代表幻灯片循环遍历的次数

changeflash(currentindex);

}

function startAm(){

timerID = setInterval("timer_tick()",5000);//8000代表间隔时间设置

}

function stopAm(){

clearInterval(timerID);

timerID=null;

}

function changeflash(i) {   

currentindex=i;

for (j=1;j<=$("#control_point").children().length;j++){//此处的5代表你想要添加的幻灯片的数量与下面的5相呼应

if (j==i){

$("#flash"+j).fadeIn(500);

//$("#flash"+j).css("display","block");

$("#f"+j).removeClass();

$("#f"+j).addClass("dq");

$("#flashBg").css("background-color",$("#flash"+j));

}else{

$("#flash"+j).css("display","none");

//$("#flash"+j).fadeOut(500);

$("#f"+j).removeClass();

$("#f"+j).addClass("no");

}

}



}

$(document).ready(function(){       

$("#flash>a").bind("mouseover",function(){

//alert(11);

stopAm();

});

$("#flash>a").bind("mouseout",function(){

//alert(22);

startAm();

});

$("#flashBg").css("background-color",$("#flash1").attr("name"));

$(".flash_bar div").mouseover(function(){stopAm();}).mouseout(function(){startAm();});

startAm();

/*$(".item1").hover(function(){$("#tit_fc1").slideDown("normal");   }, function() {$("#tit_fc1").slideUp("fast");});                

$(".item2").hover(function(){$("#tit_fc2").slideDown("normal"); }, function() {$("#tit_fc2").slideUp("fast");});

$(".item3").hover(function(){$("#tit_fc3").slideDown("normal"); }, function() {$("#tit_fc3").slideUp("fast");});

$(".item4").hover(function(){$("#tit_fc4").slideDown("normal"); }, function() {$("#tit_fc4").slideUp("fast");});*/

});            

</script>






</head>

<body><div id="flashBg">

    <div id="flashLine">

      <div id="flash"> 
       <a id="flash1" href="#" target="_blank" style="display:block"><img src="pic/1.jpg" width="1000" height="362" /></a>
       <a id="flash2" href="#" target="_blank" style="display:block"><img src="pic/2.jpg" width="1000" height="362" /></a>
       <a href="#" target="_blank" id="flash3"><img src="pic/3.jpg" width="1000" height="362"/></a>
       <a href="#" target="_blank" id="flash4"><img src="pic/4.jpg" width="1000" height="362" /></a>
<a href="#" target="_blank" id="flash5"><img src="pic/5.jpg" width="1000" height="362"/></a>
<a href="#" target="_blank" id="flash6"><img src="pic/6.jpg" width="1000" height="362" /></a> 
<a href="#" target="_blank" id="flash7"><img src="pic/7.jpg" width="1000" height="362" /></a> 
<a href="#" target="_blank" id="flash8"><img src="pic/8.jpg" width="1000" height="362" /></a>
        <div class="flash_bar" id="control_point">
          <div class="dq"  id="f1" onClick="changeflash(1)"></div>
<div class="no"  id="f2" onClick="changeflash(2)"></div>
<div class="no"  id="f3" onClick="changeflash(3)"></div>
<div class="no"  id="f4" onClick="changeflash(4)"></div>
<div class="no"  id="f5" onClick="changeflash(5)"></div>
<div class="no"  id="f6" onClick="changeflash(6)"></div>
<div class="no"  id="f7" onClick="changeflash(7)"></div>
<div class="no"  id="f8" onClick="changeflash(8)"></div>

        </div>
      </div>
  </div>
  </div>
</body>
</html>
